<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3stone</title>
<link rel='stylesheet' id='camera-css'  href='/mcouponMgr/css/camera.css' type='text/css' media='all'> 
<link href="/mcouponMgr/jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="/mcouponMgr/jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="/mcouponMgr/css/3stone.css" rel="stylesheet" type="text/css">
<script>
        var userAgent = navigator.userAgent + '';
        if (userAgent.indexOf('iPhone') > -1) {
          document.write('<script src="/mcouponMgr/js/lib/cordova-iphone.js"></sc' + 'ript>');
          var mobile_system = 'iphone';
        } else if (userAgent.indexOf('Android') > -1) {
            document.write('<script src="/mcouponMgr/js/lib/cordova-2.0.0.js"></sc' + 'ript>');
          var mobile_system = 'android';
        } else {
          var mobile_system = '';
        }
      </script>
      <script src="/mcouponMgr/js/lib/jquery.js"></script>
      <!-- your scripts here -->
      <script src="/mcouponMgr/js/app/app.js"></script>
      <script src="/mcouponMgr/js/app/bootstrap.js"></script>
      <script src="/mcouponMgr/js/lib/jquery.mobile.js"></script>
      <script type='text/javascript' src='/mcouponMgr/scripts/camera.min.js'></script> 
      <script src="/mcouponMgr/js/jquery.easing.1.3.js"></script>
        <script>
               function onDeviceReady() {
            console.log("We got device ready");
            cordova.exec(null, null, "SplashScreen", "hide", []);
         	        }

        
            // Soon to beonDeviceReady
            // navigator.splashscreen.hide();
        </script>
</head> 
<body> 

<div id="store" data-role="page">
	<div data-role="header" data-position="fixed" data-add-back-btn="true">
    <a href="#" data-icon="back" data-rel="back">上一頁</a>    
    <h1>店家列表</h1>
    <div data-role="navbar">
     <ul>
     <li><a href="#store" data-icon="grid" data-iconpos="top" data-theme="b">店家列表</a></li>
     <li><a href="#coupon" data-icon="star" data-iconpos="top">優惠好康</a></li>
     <li><a href="#game" data-icon="gear" data-iconpos="top">闖關遊戲</a></li>
     <li><a href="#favorites" data-icon="shadow" data-iconpos="top">我的最愛</a></li>
     </ul>
    </div>    
    <div data-role="navbar">
     <ul>
     <li><a href="/mcouponMgr/Stores/storeList/1" >飲食</a></li>
     <li><a href="/mcouponMgr/Stores/storeList/2">服飾</a></li>
     <li><a href="/mcouponMgr/Stores/storeList/3">住宿</a></li>
     <li><a href="/mcouponMgr/Stores/storeList/4">交通</a></li>
     <li><a href="/mcouponMgr/Stores/storeList/5">附近店家</a></li>
     </ul>
    </div>      
	</div>
    
	<div data-role="content">    
    <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="搜尋店家名稱" ></ul>
    <ul data-role="listview"  data-inset="true">
	<?php 
	  if($stores){ 
        foreach($stores as $store):
          //測試查詢<1公里附近店家
	      $EARTH_RADIUS = 6378.137;
	      $lat1 = 24.966067;
	      $lng1 = 121.5830;
	      $lat2 = $store['C']['latitude'];
	      $lng2 = $store['C']['longitude'];
	      $radLat1 = $lat1 * pi() / 180.0;
	      $radLat2 = $lat2 * pi() / 180.0;
	      $c = $radLat1 - $radLat2;
	      $radLng1 = $lng1 * pi() / 180.0;
	      $radLng2 = $lng2 * pi() / 180.0;
	      $b = ($lng1 * pi() / 180.0) - ($lng2 * pi() / 180.0);
	      $s = 2 * asin(sqrt(pow(sin($c / 2), 2) + cos($radLat1) * cos($radLat2) * pow(sin($b / 2), 2)));
	      $s = $s * $EARTH_RADIUS;
	      $s = round($s * 10000) / 10000;
	
	      if($tid<5){?> 
        <li>
            <a href="#promotion">
            <img src="/mcouponMgr/files/store/<?php echo $store['C']['logo_path'];?>" />
            <h3><?php echo $store['C']['name'];?></h3>
            <p><?php echo $store['C']['tel'];?><p>
            <p><?php echo $store['C']['addr'];?></p>
            <span class="ui-li-count">距離<?php echo $s*1000;?>公尺</span>
            </a>
            <a href="#promotion" data-icon="gear"></a>
        </li>
		<?php }else{
		if($s <= 1){?>
        <li>
            <a href="#promotion">
            <img src="/mcouponMgr/files/store/<?php echo $store['C']['logo_path'];?>" />
            <h3><?php echo $store['C']['name'];?></h3>
            <p><?php echo $store['C']['tel'];?><p>
            <p><?php echo $store['C']['addr'];?></p>
            <span class="ui-li-count">距離<?php echo $s*1000;?>公尺</span>
            </a>
            <a href="#promotion" data-icon="gear"></a>
        </li>
		<?php }
        }
        endforeach;
      }else{?> 
        <li>                         
	      <div>                                                              
		    <div align="center">目前沒有資料</div>                                                        
		  </div>                                                                
<?php }?>     

    </ul>
  </div>
  
    
	<div class="copyright" data-role="footer" data-position="fixed">Copyright&copy;2012 3stone </div>
</div>
